<template>
  <div class="app-container">
    <el-row :gutter="10">
        <el-col :lg="12">
            <el-calendar v-model="mealDate">
            </el-calendar>
        </el-col>
        <el-col :lg="12">
            <div style="text-align: right;margin-bottom: 5px;">
                <el-button type="warning" @click="addMenu()">选菜</el-button>
            </div>
            <el-tabs v-model="mealType" @tab-click="handleClick" >
                <el-tab-pane :label="title.dictLabel" :name="title.dictValue" :key="title.dictValue" v-for="title in mealTypeOptions">
                    <div v-if="DataMenu[mealDateFont][title.dictValue] !=undefined && DataMenu[mealDateFont][title.dictValue].length >0">
                        <el-button type="success" class="mb8"  @click="handleSaveMenu">保存</el-button>
                        <el-collapse>
                            <el-collapse-item  v-for="(item,index) in DataMenu[mealDateFont][title.dictValue]" :key="DataMenu[mealDateFont][title.dictValue].length+item.menuId" :title="item.menuName">
                                <el-card>
                                    <el-row style="margin-bottom: -12px;">
                                        <el-col :span="6">
                                            <img height="60" width="60" :src="item.menuImg" class="image">
                                        </el-col>
                                        <el-col :span="8">
                                            <div>菜单编号：{{item.menuId}}</div>
                                        </el-col>
                                        <el-col :span="8">
                                            <div>菜单价格：{{item.menuPrice}}</div>
                                        </el-col>
                                        <el-col :span="8">
                                            <div>菜单类型：{{menuTypeFormat(item.menuType)}}</div>
                                        </el-col>
                                        <el-col :span="8">
                                            <span>食堂价格：</span>
                                            <el-input-number v-model="item.canteenPrice" size="mini" placeholder="请输入菜单价格" />
                                        </el-col>
                                        <el-col :span="2">
                                            <div style="margin-top: -10px;">
                                                <el-button type="danger" icon="el-icon-delete" @click="handleDel(index)" circle></el-button>
                                            </div>
                                        </el-col>
                                    </el-row>
                                </el-card>
                            </el-collapse-item>
                        </el-collapse> 
                    </div>
                    <el-card v-else shadow="hover" style="text-align:center;">
                        <p style="color:#c5c8ce;margin-bottom:0">未关联菜单</p>
                    </el-card>
                       
                </el-tab-pane>
            </el-tabs>
        </el-col>
    </el-row>

    <el-dialog title="选择菜单" :visible.sync="openMenu" width="900px" :close-on-click-modal="false" :destroy-on-close="true">
      <Menu style="margin-top:-30px" :isHelp=true @addMenu="handleOpenRenturn"></Menu>
    </el-dialog>
    
  </div>
</template>
<script>
import {getDayCanteenMenu,editDayCanteenMenu,delCanteenMenut} from "@/api/fb/canteen";
//导入菜单
import Menu from '@/views/fb/menu/index'
export default {
    name: "CanteenDate",
    components: {
        Menu,
    },
    data() {
        return {
            //日期
            mealDate: new Date(),
            //格式化后日期
            mealDateFont :"",
            //当前选中得类型
            mealType: "zao",
            //食堂ID
            canteenId: "",
            mealTypeOptions: [],
            //是否显示选择菜单
            openMenu: false,
            //已选菜单
            DataMenu: {},
            //食堂菜单类型字典
            menuTypeOptions: [],
        }
    },
    watch: {
       mealDate(n){
           this.mealDateFont = this.parseTime(n).split(" ")[0]
           this.getCantenMenuList();
       }
    },
    created() {
        this.mealDateFont = this.parseTime(this.mealDate).split(" ")[0];
        this.canteenId = this.$route.params && this.$route.params.canteenId;
        this.getCantenMenuList();
        //查询餐类
        this.getDicts("fb_meal_type").then(response => {
            this.mealTypeOptions = response.data;
            this.mealType=response.data[0].dictValue;
        });
        this.getDicts("fb_menu_type").then(response => {
            this.menuTypeOptions = response.data;
        });

    },
    methods: {
        //菜单类型字段翻译
        menuTypeFormat(menuType) {
        return this.selectDictLabel(this.menuTypeOptions,menuType);
        },
        //选中类型
        handleClick(tab, event) {
            this.getCantenMenuList();
            //this.mealType = tab.name;
        },
        //查询食堂-日期-类型绑定得菜单
        getCantenMenuList() {
            this.loading = true;
            getDayCanteenMenu({"mealDate":this.mealDateFont,"mealType":this.mealType,"canteenId":this.canteenId}).then(response => {
                if(response.code==200){
                    this.DataMenu = response.data;
                    console.log('DataMenu',response.data);
                }
                this.loading = false;
            });
        },
        //增加菜单
        addMenu(){
            //弹窗状态
            this.openMenu= true;
        },
        //弹窗回调
        handleOpenRenturn(data) {
            this.openMenu= false;
            if(data.length>0){
                for(var i=0;i<data.length;i++){
                    data[i]["canteenPrice"]=data[i]["menuPrice"];
                }
            }
            this.DataMenu[this.mealDateFont][this.mealType] =this.DataMenu[this.mealDateFont][this.mealType].concat(data);
        },
        //删除已选菜单
        handleDel(index) {
            //食堂ID\日期\类型\菜单ID
            delCanteenMenut({
                "canteenId":this.canteenId,
                "mealDateFont":this.mealDateFont,
                "mealType":this.mealType,
                "menuId":this.DataMenu[this.mealDateFont][this.mealType][index].menuId
            }).then(response => {
                if(response.code==200){
                   this.DataMenu[this.mealDateFont][this.mealType].splice(index,1);
                   this.msgSuccess("删除成功");
                }
            });
        },
        //保存已选菜单
        handleSaveMenu(){
            this.loading = true;
            editDayCanteenMenu({
                "data":this.DataMenu,
                "canteenId":this.canteenId,
                "mealDateFont":this.mealDateFont,
                "mealType":this.mealType
                }).then(response => {
                if(response.code==200){
                   this.msgSuccess("保存成功");
                }
                this.loading = false;
            });
        }
    }  
};
</script>